<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="{{ url_for('static', filename='echarts.min.js') }}"></script>
    
  

    <link rel="stylesheet" href="{{ url_for('static', filename='bootstrap/css/bootstrap.min.css') }}">
    <script src="{{ url_for('static', filename='jquery-3.7.0.min.js') }}"></script>
    <script src="{{ url_for('static', filename='bootstrap/js/bootstrap.bundle.min.js') }}"></script>

</head>
  <body>
    <div class="container">
        <div class="row">
          <div class="col-sm text-center">
            <h1>
                k线示例
            </h1>
          </div>
        </div>
        
        <div class="row">
          <button type="button" class="btn btn-primary" id="refresh">refresh</button>
        </div>

        

        <div class="row">
            <div class="col-sm text-center" id="main" style="width: 600px;height:400px;"></div>
        </div>
    </div>
    
    <div class="position-fixed bottom-0 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;">
      <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
        <div class="toast-header">
          <strong class="mr-auto">加载数据</strong>
          <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="toast-body">
          数据已更新
        </div>
      </div>
    </div>
    
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
  
        // 指定图表的配置项和数据
        
         // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>
  </body>
</html>